<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('产品管理')" ></head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    $(function(){
        var pid = getUrlParms("pid");
        var data4Vue = {
            uri:'propertyValues',
            beans: [],
            product: '',
            category:'',
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.getProduct(pid);
                this.list();
            },
            methods: {
                list:function(){
                    var url = "products/"+pid+"/"+ this.uri;
                    axios.get(url).then(function(response) {
                        vue.beans = response.data;
                    });
                },
                getProduct:function(pid){
                    var url = "products/"+pid;
                    axios.get(url).then(function(response) {
                        vue.product = response.data;
                        vue.category = vue.product.category;
                    })
                },
                update:function(bean){
                    var url =  this.uri;
                    var id = bean.id;
                    $("#pvid"+bean.id).css("border","2px solid yellow");
                    axios.put(url,bean).then(function(response) {
                        if(bean.id==response.data.id)
                            $("#pvid"+bean.id).css("border","2px solid green");
                        else
                            $("#pvid"+bean.id).css("border","2px solid red");
                    });
                }
            }

        });
    });

</script>

<div id="workingArea" >
    <ol class="breadcrumb">
        <li><a href="admin_category_list">所有分类</a></li>
        <li><a :href="'admin_product_list?cid='+category.id">{{category.name}}</a></li>
        <li class="active">{{product.name}}</li>
        <li class="active">产品图片管理</li>
    </ol>

    <div class="editPVDiv">
        <div v-for="bean in beans" class="eachPV">
            <span class="pvName" >{{bean.property.name}}</span>
            <span class="pvValue"><input class="pvValue" :id="'pvid'+bean.id" type="text" v-model="bean.value" @keyup="update(bean)"></span>
        </div>
        <div style="clear:both"></div>
    </div>

</div>



<div th:replace="include/admin/adminFooter::html" ></div>
</body>
</html>
